<template>
  <div class="all">
    <van-nav-bar title="值得买" :fixed="true" >
      <template #left>
        <RouterLink to="/home"><van-icon name="home-o" /></RouterLink>
      </template>
      <template #right>
        <RouterLink to="/search"><van-icon name="search" /></RouterLink>
        <RouterLink to="/shoppingCart"><van-icon name="shopping-cart-o" /></RouterLink>
      </template>
    </van-nav-bar>

    <!--轮播图-->
    <div class="Zdm">
      <div class="zzdm">
        <img class="zdm" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="" />
        <text class="yyhw">严选好物 用心生活</text>
      </div>

      <div class="Lunbo">
        <van-swipe class="my-swipe" indicator-color="white" :loop="false">
          <van-swipe-item class="Kuai8" v-for="(itemlist, key) in List" :key="key">
            <div>
              <a class="Kuai" v-for="(item, index) in itemlist" :key="index" :href="item.columnUrl">
                <img :src="item.picUrl" />
                <div class="KuaiText">{{ item.mainTitle }}</div>
                <div class="KuaiText1">{{ item.viceTitle }}</div>
              </a>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 瀑布流商品推荐 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="state.nodata"
      :immediate-check="false"
      @load="getList"
    >
      <div class="SStj">
        <a class="SStjxq" v-for="(item, index) in state.proList" :key="index" :href="`https://you.163.com${item.look.schemeUrl}`">
          <img :src="item.look.picUrl" alt="" />
          <div class="SStjtext">{{ item.look.title }}</div>
          <div class="SStjfoot">
            <img :src="item.look.avatar" alt="" />
            <div class="footText">{{ item.look.nickname }}</div>
            <van-icon name="eye-o" />
            <div class="footTextr">{{ item.look.readCount }}</div>
          </div>
        </a>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import { reqList } from '../../api/deserve'
// 引入使用仓库
import useWorthStore from '../../stores/deserve'
const store = useWorthStore()

// 轮播图的响应式数据
let swiperList = ref([])

let arr = ref([])

let List = ref([])

// // 挂载渲染数据
onMounted(() => {
  // 获取轮播图数据
  store.getSwiperData()
})

watch(
  () => store.swiperData,
  () => {
    // console.log(store.swiperData)
    arr.value = store.swiperData
    // console.log(store.swiperData)
  }
)

watch(arr, () => {
  arrres(8, arr.value)
})


function arrres(n: any, arr: any) {
  // console.log(arr)
  const length = 8 - (arr.length % 8)
  for (let i = 0; i < length; i++) {
    arr.push(arr[i])
  }

  let result = <any>[]

  for (let i = 0; i < arr.length; i += n) {
    result.push(arr.slice(i, i + n))
  }
  List.value = result
}

// 监听仓库轮播图数据的变化,并修改值
watch(
  () => store.swiperData,
  () => {
    swiperList.value = store.swiperData
    // console.log(swiperList.value)
  }
)

// 商品 代码--------------------------------------------------
onMounted(() => {
  getList()  
})
const loading = ref(false)
const finished = ref(false)
const state = reactive<any>({
  proList: [], //产品列表数据
  nodata: '',
  page: 2, //页码
  pageSize: 10 //每页条数
})

//商品推荐获取数据
const getList = () => {
  let params = {
    page: state.page,
    size: state.pageSize
  }
  reqList(params.page, params.size).then((res: any) => {
    // if (res.code == 200) {
      // console.log(res)
      state.page++ //页数+1
      loading.value = false // 加载状态结束
      state.proList = state.proList.concat(res.result)
      //判断是否是最后一页
      if (res.length < state.pageSize) {
        finished.value = true
        state.nodata = '已经到底了'
      }
      if (state.proList.length == 0) {
        finished.value = true
        state.nodata = '暂无数据'
      }
    // }
  })
}
</script>

<style scoped>
.all {
  background: #eee;
  height: 100%;
}
.Top {
  display: flex;
  width: 100%;
  height: 400rpx;
  background-color: aqua;
  position: sticky;
  top: 0px;
}
.all .van-nav-bar__title {
  font-size: 500px;
}
.van-icon {
  font-size: 25px;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  color: #333;
}
.zzd {
  font-size: 500px;
}

.Zdm {
  width: 100%;
  background: no-repeat center top / 100% 100%;
  background-image: url('https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView'),
    linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.zzdm {
  display: flex;
  padding-top: 50px;
}
.Zdm .zzdm .zdm {
  width: 65px;
  padding: 10px;
}
.Zdm .zzdm text {
  padding-top: 20px;
  color: #fff;
  font-size: 15px;
}
.Zdm .Lunbo {
  width: 95%;
  border-radius: 10px;
  margin: auto;
  background-color: #fff;
  overflow: auto;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  width: 100%;
  text-align: center;
}
.Kuai8 {
  width: 100%;
  height: 270px;
}
.Kuai {
  display: inline-block;
  width: 84px;
  margin-top: 20px;
}
.Kuai img {
  height: 60px;
}
.Kuai .KuaiText {
  color: #333;
  font-size: 14px;
  text-align: center;
}
.Kuai .KuaiText1 {
  font-size: 13px;
}

.SStj {
  width: 100%;
  column-count: 2;
}
.SStjxq {
  width: 89%;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 10px;
  margin-left: 10px;
  overflow: hidden;
  break-inside: avoid;
}
.SStj img {
  width: 100%;
}
.SStj .SStjtext {
  font-size: 15px;
  margin: 5px 10px;
}
.SStjfoot {
  width: 100%;
  display: flex;
}
.SStjfoot img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 10px;
}
.SStjfoot .footText {
  line-height: 44px;
  font-size: 10px;
  flex: 1;
  color: #7f7f7f;
}

.SStjfoot .van-icon {
  line-height: 44px;
  font-size: 18px;
  color: #7f7f7f;
  padding: 0;
}
.SStjfoot .footTextr {
  line-height: 44px;
  font-size: 10px;
  color: #7f7f7f;
  margin-right: 10px;
}
</style>
